<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">学院报到</text>
    </view>

    <!-- 步骤指示器 -->
    <view class="steps">
      <view class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
        <view class="step-num">1</view>
        <text class="step-text">获取身份</text>
      </view>
      <view class="step-line"></view>
      <view class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
        <view class="step-num">2</view>
        <text class="step-text">学院报到</text>
      </view>
      <view class="step-line"></view>
      <view class="step" :class="{ active: currentStep >= 3 }">
        <view class="step-num">3</view>
        <text class="step-text">办理完成</text>
      </view>
    </view>

    <!-- 第一步：学生信息确认 -->
    <view class="content-box" v-if="currentStep === 1 || currentStep === 2">
      <!-- 学生照片 -->
      <view class="student-photo">
        <image :src="studentInfo.photo" mode="aspectFill"></image>
      </view>

      <!-- 学生信息 -->
      <view class="info-section">
        <view class="section-title">
          <text class="icon iconfont icon-user"></text>
          <text>学生信息</text>
        </view>

        <view class="info-item">
          <text class="label">校区：</text>
          <text class="value">{{studentInfo.campus}}</text>
        </view>
        <view class="info-item">
          <text class="label">学院：</text>
          <text class="value">{{studentInfo.college}}</text>
        </view>
        <view class="info-item">
          <text class="label">专业：</text>
          <text class="value">{{studentInfo.major}}</text>
        </view>
        <view class="info-item">
          <text class="label">班级：</text>
          <text class="value">{{studentInfo.class}}</text>
        </view>
        <view class="info-item">
          <text class="label">辅导员：</text>
          <text class="value">{{studentInfo.counselor}}</text>
        </view>
        <view class="info-item">
          <text class="label">学号：</text>
          <text class="value">{{studentInfo.studentId}}</text>
        </view>
        <view class="info-item">
          <text class="label">民族：</text>
          <text class="value">{{studentInfo.ethnicity}}</text>
        </view>
      </view>
    </view>

    <!-- 第三步：完成页面 -->
    <view class="complete-box" v-if="currentStep === 3">
      <view class="success-icon">
        <text class="icon iconfont icon-success"></text>
      </view>
      <text class="success-text">恭喜你该环节办理完成！</text>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <button v-if="currentStep === 1 || currentStep === 2" class="primary-btn" @tap="handleSubmit">学院报到</button>
      <button v-if="currentStep === 3" class="primary-btn" @tap="goToHome">回到首页</button>
      <button v-if="currentStep === 1" class="secondary-btn" @tap="skipRegistration">暂不报到</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      studentInfo: {
        photo: 'http://101.37.17.240:9000/zhxy/student-photo.jpg',
        campus: '枫林校区',
        college: '软件学院',
        major: '计算机科学与技术',
        class: '1221803班',
        counselor: '吴某某',
        studentId: '2016081206',
        ethnicity: '汉族'
      }
    }
  },
  onLoad(option) {
    // 如果有传入步骤参数，则设置当前步骤
    if (option.step) {
      this.currentStep = parseInt(option.step);
    }
  },
  methods: {
    goBack() {
      if (this.currentStep === 3) {
        uni.redirectTo({
          url: '/pages/index/index'
        });
      } else {
        uni.navigateBack();
      }
    },
    handleSubmit() {
      // 提交学生信息并进入下一步
      uni.showLoading({
        title: '提交中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.currentStep = 3;
      }, 1500);
    },
    skipRegistration() {
      // 暂不报到，跳转到首页
      uni.showModal({
        title: '提示',
        content: '是否确定暂不报到？您可以随时在"一站办事"中完成报到',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/index/index'
            });
          }
        }
      });
    },
    goToHome() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.header {
  background: #fff;
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  border-bottom: 1rpx solid #eee;
  
  .back-btn {
    padding: 20rpx;
    margin-left: -20rpx;
    
    .iconfont {
      font-size: 40rpx;
      color: #333;
    }
  }
  
  .title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  background: #fff;
  
  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .step-num {
      width: 60rpx;
      height: 60rpx;
      background: #ddd;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .step-text {
      font-size: 24rpx;
      color: #999;
    }
    
    &.active {
      .step-num {
        background: #FF9800;
      }
      
      .step-text {
        color: #FF9800;
      }
    }
    
    &.completed {
      .step-num {
        background: #FF9800;
      }
    }
  }
  
  .step-line {
    width: 100rpx;
    height: 2rpx;
    background: #ddd;
    margin: 0 10rpx;
  }
}

.content-box {
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .student-photo {
    width: 100%;
    height: 300rpx;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info-section {
  padding: 30rpx;
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .icon {
      font-size: 36rpx;
      color: #FF9800;
      margin-right: 10rpx;
    }
    
    text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .info-item {
    display: flex;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #999;
    }
    
    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.complete-box {
  margin: 60rpx 30rpx;
  padding: 60rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .success-icon {
    width: 120rpx;
    height: 120rpx;
    background: #FF9800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    
    .icon {
      font-size: 60rpx;
      color: #fff;
    }
  }
  
  .success-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.bottom-btns {
  padding: 30rpx;
  
  .primary-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #FF9800;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    margin-bottom: 30rpx;
  }
  
  .secondary-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #fff;
    color: #666;
    font-size: 32rpx;
    border-radius: 45rpx;
    border: 1rpx solid #ddd;
  }
}
</style> 